<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-19 11:32:47
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-24 16:41:03
 * @Description: 产品 Products
-->
<!--  -->
<template>
  <div class="main-window">
    <!-- ----------------------- 中间部分 ----------------- -->
    <div class="middle-box">
      <!-- ------------ Welcoome ------------ -->
      <div class="welcome none-select">
        <div class="subtitle">Hi Li Zengkun,</div>
        <div class="title">Welcome back🎉</div>
      </div>

      <!-- ----------- Banner --------------- -->
      <div class="banner slide-in-left">
        <div class="behind-card"></div>
        <div class="behind-card"></div>
        <div class="front-card">
          <ul class="banner-list">
            <li>
              <div class="fr">
                <img class="ball" src="../assets/imgs/ball-1.svg" alt="" />
              </div>
              <div class="text fl">
                <div class="headline">Your Products</div>
                <div class="content">Create Your Products Dashboard in Minutes</div>
                <div class="btn card-shadow">Check all settings</div>
              </div>
              <div class="clear"></div>
            </li>
          </ul>
        </div>
      </div>

      <!-- ------------ Products-Box -------------- -->
      <div class="product-box card slide-in-right" style="height: auto">
        <div class="shadow"></div>
        <div class="bg">
          <!-- 顶部过滤器和搜索框 -->
          <div class="head">
            <div class="filter-box">
              <a-select
                class="filter"
                id="filter1"
                placeholder="Select"
                :trigger-props="{ autoFitPopupMinWidth: true }"
              >
                <a-option>Beijing-Beijing-Beijing</a-option>
                <a-option>Shanghai</a-option>
                <a-option>Guangzhou</a-option>
              </a-select>
              <!-- 月份选择器 -->
              <a-month-picker class="filter" />
              <!-- 搜索栏 -->
              <a-input class="search" placeholder="Please enter something" allow-clear>
                <template #prefix>
                  <SearchIcon theme="outline" size="24" :strokeWidth="3" />
                </template>
                <template #suffix>
                  <a class="search-btn">Advance Search</a>
                </template>
              </a-input>
            </div>
            <div class="icon-box">
              <span class="modify-btn">
                <WriteIcon theme="outline" size="24" :strokeWidth="3" />
              </span>
              <span class="detele-btn">
                <DeleteFour theme="outline" size="24" :strokeWidth="3" />
              </span>
            </div>
          </div>
          <!-- 产品列表 -->
          <div class="list">
            <div class="list-head">
              <!-- 全选 -->
              <a-checkbox
                :style="{ width: '20px' }"
                :model-value="checkedAll"
                :indeterminate="indeterminate"
                @change="handleChangeAll"
              >
              </a-checkbox>
              <span class="product-span">Products</span>
              <span class="hidden">Amount</span>
              <span class="hidden">Color</span>
              <span class="hidden">Price</span>
              <span class="hidden">Rating</span>
            </div>
            <!-- 产品列表 -->
            <a-checkbox-group
              :style="{ height: 'auto' }"
              class="list-content"
              v-model="selectedProducts"
              @change="handleChange"
              id="checkboxGroup"
            >
              <a-checkbox
                :value="item.id"
                class="item"
                v-for="(item, index) in products"
                :key="index"
              >
                <span class="product">
                  <div class="img-box">
                    <img src="../assets/imgs/product1.svg" alt="" />
                  </div>
                  <div class="text">
                    <div class="name">
                      {{ item.name }}
                    </div>
                    <div class="info">
                      {{ item.info }}
                    </div>
                  </div>
                </span>
                <span class="amount">{{ item.amount }}</span>
                <span class="color">{{ item.colorName }}</span>
                <span class="price">${{ item.price }}</span>
                <span class="rating">
                  <a-popover title="Rating">
                    <a-rate :default-value="item.rating" readonly />
                    <template #content>
                      <p>{{item.rating}}分</p>
                      
                    </template>
                  </a-popover>
                </span>
              </a-checkbox>
            </a-checkbox-group>
          </div>
          <!-- 加载更多 -->
          <div class="loadmore card-shadow">Load More</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: true,
      showFilter1: false,
      filter1Value: "",
      indeterminate: false,
      checkedAll: false,
      selectedProducts: [],
      filter1: [
        { index: 1, name: "Last 7 days" },
        { index: 2, name: "Last 30 days" },
        { index: 3, name: "Last 60 days" },
        { index: 4, name: "Last 90 days" },
        { index: 5, name: "Last 180 days" },
      ],
      products: [
        {
          id: 1,
          name: "product1",
          info: "这是一个产品info",
          img: "",
          amount: "37 in stock",
          colorName: "Purple",
          colorValue: "#6C5DD3",
          price: "68.00",
          rating: "4.5",
        },
        {
          id: 2,
          name: "product2",
          info: "这是一个产品info",
          amount: "37 in stock",
          img: "",
          colorName: "Purple",
          colorValue: "#6C5DD3",
          price: "68.00",
          rating: "3.6",
        },
        {
          id: 3,
          name: "product3",
          info: "这是一个产品info",
          amount: "37 in stock",
          img: "",
          colorName: "Purple",
          colorValue: "#6C5DD3",
          price: "68.00",
          rating: "3.8",
        },
        {
          id: 4,
          name: "product4",
          info: "这是一个产品info",
          amount: "37 in stock",
          img: "",
          colorName: "Purple",
          colorValue: "#6C5DD3",
          price: "68.00",
          rating: "4.8",
        },
        {
          id: 5,
          name: "product5",
          info: "这是一个产品info",
          amount: "37 in stock",
          img: "",
          colorName: "Purple",
          colorValue: "#6C5DD3",
          price: "68.00",
          rating: "1.4",
        },
        {
          id: 6,
          name: "product6",
          info: "这是一个产品info",
          amount: "37 in stock",
          img: "",
          colorName: "Purple",
          colorValue: "#6C5DD3",
          price: "68.00",
          rating: "5.0",
        },
      ],
    };
  },
  components: {},
  methods: {
    openValue() {
      this.showFilter1 = !this.showFilter1;
    },
    getValue(index, item) {
      this.filter1Value = item.name;
      this.showFilter1 = false;
    },
    // 全选
    handleChangeAll(value) {
      this.indeterminate = false;
      if (value) {
        this.checkedAll = true;
        this.products.forEach((item) => {
          this.selectedProducts.push(item.id);
        });
        this.handleChange(this.selectedProducts)

      } else {
        this.checkedAll = false;
        this.selectedProducts = [];
        this.handleChange([])
      }
    },
    // selectProduct(ev){
    //   console.log(ev);
    // },
    handleChange(value){
      console.log(value);
      let checkeditems = Array.from(document.getElementById('checkboxGroup').children)
      for(let i in checkeditems){
         checkeditems[i].style.background = '#fff'
      }
      for(let i in value){
        checkeditems[i].style.background = 'rgba(0,0,0,0.1)'
      }
    }
  },
};
</script>

<style lang="less" scoped>
.middle-box {
  width: 100%;
}
.banner .front-card {
  background: var(--primary-color2);
}
.banner .headline {
  font-size: 40px;
  line-height: 60px;
  font-weight: 600;
}
/* --------------- product-box ------------- */
.product-box {
  height: auto;
  width: 100%;
}

.product-box .bg {
  padding: 32px;
  height: auto;
}
.product-box .head {
  display: flex;
  justify-content: space-between;
}
.filter-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // width: calc(100% - 152px);
  width: 90%;
}
// 重写选择器样式

// :deep()
:deep(.filter) {
  height: 56px;
  width: calc(30% - 16px);
  background: var(--input-background-color);
  border-radius: 16px;
  border: 3px solid transparent;
  transition: all 0.3s ease-out;
}
:deep(.search) {
  height: 56px;
  width: 40%;
  background: var(--input-background-color);
  border-radius: 16px;
  border: 3px solid transparent;
  transition: all 0.3s ease-out;
}
:deep(.arco-input-wrapper:focus-within, .arco-input-wrapper.arco-input-focus) {
  border: 3px solid var(--primary-color2);
}
:deep(.arco-select-view-single:focus-within, .arco-select-view-single.arco-select-view-focus, .arco-picker-focused, .arco-picker-focused:hover) {
  border-color: var(--primary-color2);
  border: 3px solid var(--primary-color2);
}

:deep(.arco-picker-focused, .arco-picker-focused:hover) {
  border-color: var(--primary-color2);
  border: 3px solid var(--primary-color2);
}
.search-btn {
  padding: 14px 18px;
  color: #fff;
  background: var(--blue-color2);
  font-size: 14px;
  line-height: 20px;
  border-radius: 12px;
  user-select: none;
  cursor: pointer;
}
// icon-btn
.icon-box {
  width: 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.icon-box span {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-out;
  box-shadow: 5px 5px 10px #e3e6ec;
}
.icon-box span:active {
  transform: translate(1px, 1px) scale(0.9);
  box-shadow: 0px 0px 0px #e3e6ec;
}
.icon-box .detele-btn {
  background: var(--error-base-color);
}
.icon-box .detele-btn:active {
  background: var(--error-click-color);
}

.icon-box .modify-btn {
  background: var(--primary-color2);
}
// -------------------------- 产品列表 ------------------
.product-box {
  .list {
    width: 100%;
    margin-top: 16px;
    .list-head {
      height: 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      span {
        width: 20%;
        text-align: left;
        padding-left: 10px;
      }
      .product-span {
        width: 30%;
      }
    }
    :deep(.list-content) {
      height: auto;
      width: 100%;
      border-top: 1px solid var(--grey-color);
    }
  }
  .loadmore {
    height: 56px;
    width: 100%;
    background: var(--primary-color);
    color: var(--background-color);
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    user-select: none;
    border-radius: 16px;
    margin-top: 32px;
    cursor: pointer;
    line-height: 56px;
  }
}
:deep(.arco-checkbox-group) {
  height: auto;
}
:deep(.arco-checkbox-group .arco-checkbox) {
  height: 128px;
  width: 100%;
  display: block;
  border-bottom: 1px solid var(--grey-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: all 0.2s ease-out;
  .arco-checkbox-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    text-align: left;
    flex-wrap: nowrap;
    width: calc(100% - 20px);
    span {
      width: 20%;
      padding-left: 4px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 400;
      font-size: 14px;
      line-height: 24px;
      color: var(--text-active-color);
    }
    span.product {
      width: 30%;
      .img-box {
        width: 96px;
        height: 72px;
        background: var(--other-color-3);
        border-radius: 8px;
        img {
          height: 100%;
        }
      }
      .text {
        width: calc(100% - 96px);
        padding-left: 24px;
        .name {
          font-weight: 900;
          font-size: 18px;
          line-height: 24px;
          color: var(--text-active-color);
        }
        .info {
          font-weight: 600;
          font-size: 13px;
          line-height: 24px;
          color: var(--font-grey-color);
        }
      }
    }
  }
}
:deep(.arco-checkbox-group .arco-checkbox:hover) {
  background: var(--grey-color);
  border-radius: 12px;
}

// 响应式
/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1224px) {
  :deep(.filter) {
    width: calc(50% - 8px);
  }
  :deep(.search) {
    width: 100%;
    margin-top: 16px;
  }
}

/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .filter-box {
    width: 100%;
  }
  :deep(.filter) {
    width: 100%;
    margin-bottom: 16px;
  }
  :deep(.search) {
    width: 100%;
  }
  .icon-box {
    position: absolute;
    width: 50%;
    right: 8px;
    top: 248px;
  }
  .product-box {
    .list {
      .list-head {
        justify-content: left;
      }
    }
  }
  .hidden {
    display: none;
  }
  :deep(.arco-checkbox-group .arco-checkbox) {
    height: auto;
    padding: 24px 0;
    .arco-checkbox-label {
      flex-wrap: wrap;
      span {
        width: calc(100% / 4);
        margin-top: 12px;
      }
      span.product {
        width: 100%;
      }
    }
  }
}
</style>
